<template>
    <v-container>
        <div class="detail_header">
            <strong>{{ word.word }}</strong>
            <v-img v-if="word.image != null" :width="100" aspect-ratio="1/1" cover :src="word.image"></v-img>
            <br>
            <div v-if="word.pronunciation != null && word.pronunciation.length > 0">
                <span @click="playAudio(pronunciation,index)" v-for="(pronunciation, index) in word.pronunciation"
                    v-bind:key="index">
                    <small style="font-size: 16px;">{{ pronunciation.region }}[{{ pronunciation.symbol }}]</small>
                    <v-icon v-if="pronunciationStatusList[index].color!='grey'" :color="pronunciationStatusList[index].color" size="small" icon="mdi-volume-high"></v-icon> &nbsp;
                </span>
            </div>
        </div>
        <div v-if="word.etymologyPlain != null">
            <v-divider></v-divider>
            <small>单词词源</small>
            <p>{{ word.etymologyPlain }}</p>
            <br>
        </div>
        <div v-if="word.wordExchange != null">
            <v-divider></v-divider>
            <small>单词变形</small>
            <p :key="index" v-for="(exchange, index) in Object.keys(word.wordExchange)">
                {{exchange}}：{{ word.wordExchange[exchange] }}
            </p>
            <br>
        </div>
        <div v-if="word.remember != null">
            <!-- <v-divider></v-divider> -->
            <small>记忆技巧：</small>
            <span>{{ word.remember }}</span>
            <br>
        </div>
        <div v-if="word.tag != null && word.tag.length > 0">
            <small class="word_tag" :key="index" v-for="(mean, index) in word.tag">{{ mean }}</small>
            <br>
        </div>
        <div v-if="word.translatedMeanings != null && word.translatedMeanings.length > 0">
            <v-divider></v-divider>
            <small>单词释义</small>
            <p :key="index" v-for="(mean, index) in word.translatedMeanings">{{ mean.type }}.{{ mean.meaning }}</p>
            <br>
        </div>
        <div>
            <v-divider></v-divider>
            <small>原释义</small>
            <div v-for="(mean, index) in word.originalMeanings" :key="index">
                <strong v-if="mean.type!=null">{{ mean.type }} </strong>
                <strong v-if="mean.symbol!=null">[{{ mean.symbol }}]</strong>
                <p :style="{textIndent: mean.type!=null&&mean.symbol!=null?'10px':'0'}" 
                    v-for="(item, index2) in mean.meaning" :key="index2">
                    {{ index2 + 1}}.
                    {{item.explain }}
                </p>
            </div>

            <br>
        </div>
        <div>
            <v-divider></v-divider>
            <small>相关例句</small>
            <p :key="index" v-for="(sentence, index) in word.sentence" style="margin-bottom: 10px;">
                {{ sentence.self }}
                <br>
                {{ sentence.mean }}
            </p>
        </div>
        <span style="display: block;width: fit-content;margin: auto;color:grey;cursor: pointer;">数据来源：
            <strong style="color:#2196F3" @click="toggle(word.sourceUrl)">{{word.source}}</strong>
            <v-icon v-hasPermi="['read-word-refresh-admin']" v-if="this.word.sourceUrl!=null" @click="refreshWord" icon="mdi-refresh"/>
        </span>
        <v-overlay :model-value="overlay" class="align-center justify-center">
            <v-progress-circular color="primary" indeterminate size="64"></v-progress-circular>
        </v-overlay>
    </v-container>
    <i-frame-component ref="iframe"/>
</template>

<script>
import { isResourceExist } from "@/api/voice";
import { refreshWord } from "@/api/word.js";
import IFrameComponent from '@/components/IFrameComponent.vue';

export default {
    name: 'AdminWordView',
    components: { IFrameComponent },
    data() {
        return {
            word: {},
            audio: null,
            isPlaying: false,
            audioUrl: null,
            overlay:false,
            candidate:{
                previous:null,
                next:null,
            },
            curIndex:0,
            pronunciationStatusList:[{},{}]
        }
    },
    created() {
    },
    unmounted() {
        if (this.audio != null) {
            this.audio.pause()
            this.audio = null
        }
    },
    methods: {
        setWord(word){
            this.word=word
            this.isSymbolRescourceExist()
        },
        playAudio(pronunciation,index) {
            if(this.pronunciationStatusList[index]==null||this.pronunciationStatusList[index].status!=200)return
            if (this.audio != null && pronunciation.resource == this.audioUrl) {
                this.audio.pause()
                this.pronunciationStatusList[index].color='black'
                this.audio = null
                return
            } else if (pronunciation.resource != this.audioUrl) {
                if(this.audio!=null)this.audio.pause()
                this.pronunciationStatusList.forEach(item=>item.color='black')
                this.audio = new Audio(pronunciation.resource)
                this.audio.loop = true
                this.audio.play()
                this.pronunciationStatusList[index].color='green'
                this.audioUrl = pronunciation.resource
                return
            }
            this.audio = new Audio(pronunciation.resource)
            this.audio.loop = true
            this.audio.play()
            this.pronunciationStatusList[index].color='green'
            this.audioUrl = pronunciation.resource
        },
        applyDestroyed(){
            if (this.audio != null) {
                this.audio.pause()
                this.audio = null
                return
            }
        },
        refreshWord(){
            if(this.word.sourceUrl==null)return
            this.overlay=true
            refreshWord(this.word.wordId).then(resp=>{
                if(resp.data==null)return
                this.word = resp.data
            }).finally(()=>this.overlay=false)
        },
        toggle(url){
            if(url!=null)this.$refs.iframe.toggle(true,url)
        },
        isSymbolRescourceExist(){
            let word=this.word
            if(word.pronunciation == null || word.pronunciation.length < 0)return
            let pronunciationList=word.pronunciation
            for(let i=0;i<pronunciationList.length;i++){
                if(pronunciationList[i].resource==null||pronunciationList[i].resource=='')continue
                isResourceExist(pronunciationList[i].resource).then(resp=>{
                    this.pronunciationStatusList[i]={status:resp.status}
                    this.pronunciationStatusList[i].color=resp.status==200?'black':'grey'
                })
            }
        }
    }
}
</script>

<style scoped>
.detail_header strong {
    font-size: 50px;
}
.detail_bottom {
    display: flex;
    margin: auto;
    justify-content: space-between;
    position: fixed;
    bottom: 0px;
    padding-bottom: 10px;
    background-color: white;
    width: 48%;
    padding-top: 5px;
    border-top: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
}

.detail_bottom div {
    font-size: 18px;
    cursor: pointer;
}
.word_tag{
    background: #f2f2f2;
    border-radius: 2px;
    box-sizing: border-box;
    color: #999;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    margin-right: 12px;
    padding: 0 6px;
}
@media screen and (max-width: 1300px) {
    .detail_bottom {
        width: 45%;
    }
}
@media screen and (max-width: 768px) {
    .detail_bottom {
        width: 90%;
    }
}
</style>